
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js" ><!--<![endif]-->

    <head>
    
        <!-- BEGIN: basic page needs -->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
        <title>REDDESIGN - Site Template</title>
        <!-- END: basic page needs -->
        
        <!-- BEGIN: css -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/skin-default.css" rel="stylesheet" type="text/css" />
        <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
        <!-- END: css -->
            
        <!-- BEGIN: js -->
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script> 
        <script type="text/javascript" src="js/respond.js"></script> 
        <script type="text/javascript" src="js/superfish.js"></script>
        <script type="text/javascript" src="js/hoverIntent.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
        <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
        <script type="text/javascript" src="js/jquery.tweet.js"></script>
        <script type="text/javascript" src="js/jquery.flexslider.js"></script>
        <script type="text/javascript" src="js/jflickrfeed.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script> 
        <script type="text/javascript" src="js/main.js"></script>
        <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        <!-- END: js -->
        
    </head>
    
<body>

<!-- .container -->
<section class="container">


    <!-- #header  -->
    <header id="header">
        <!-- .row -->
        <div class="row">

            <!-- .span3.logo -->
            <div class="span3 logo">
                <a href="./index.html" ><img src="images/logo.png" alt="Logo" /></a>
            </div><!-- /.span3.logo -->
            
            <!-- .span9 -->
            <nav class="span9">

                <!-- #menu -->
                <ul id="menu">
                    <li><a href="./index.html" data-description="Home Page">Home</a></li>
                    <li><a href="./about.html" data-description="About Page">About</a>
                        <ul>
                            <li><a href="./team.html">Team</a></li>
                            <li><a href="./services.html">Services</a></li>
                            <li><a href="./testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li><a href="./portfolio.html" data-description="Portfolio Page">Portfolio</a>
                        <ul>
                            <li><a href="./portfolio-left.html">Portfolio Left Sidebar</a></li>
                            <li><a href="./portfolio-right.html">Portfolio Right Sidebar</a></li>
                            <li><a href="./portfolio-single-left.html">Portfolio Single Left</a></li>
                            <li><a href="./portfolio-single-right.html">Portfolio Single Right</a></li>
                        </ul>
                    </li>
                    <li><a href="./blog-left.html" class="current" data-description="Blog Page">Blog</a>
                        <ul>
                            <li><a href="./blog-right.html">Blog Right Sidebar</a></li>
                            <li><a href="./blog-without.html">Blog Without Sidebar</a></li>
                            <li><a href="./blog-single-left.html">Blog Single Left</a></li>
                            <li><a href="./blog-single-right.html">Blog Single Right</a></li>
                            <li><a href="./blog-single-without.html">Blog Single Without</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-description="Features Page">Features</a>
                        <ul>
                            <li><a href="./scaffolding.html">Scaffolding</a></li>
                            <li><a href="./base-css.html">Base CSS</a></li>
                            <li><a href="./components.html">Components</a></li>
                            <li><a href="./jquery-plugins .html">jQuery plugins</a></li>
                        </ul>
                    </li>
                    <li><a href="./contact.html" data-description="Contact Page">Contact</a></li>
                    <li><a href="http://themeforest.net/item/reddesign-html-responsive-portfolio-template/2784878?ref=bingumd" data-description="Purchase">Purchase</a></li>
                </ul><!-- /#menu -->

            </nav><!-- .span9-->

        </div><!-- /.row -->
    </header><!-- /#header  -->


    <!-- #breadcrumb -->
    <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li><a href="#">Blog</a> <span class="divider">/</span></li>
        <li class="active">Single</li>
    </ul><!-- /#breadcrumb -->


    <!-- .row -->
    <div class="row">

        <!-- #page.span9.alignright -->
        <section id="page" class="span9 alignright">

            <!-- .entry -->
            <article class="entry single-post">

                <img src="example/post1.jpg" alt="Images" />

                <div class="blog-title">

                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>

                    <ol>
                        <li>By admin</li>
                        <li> On May 8 2012</li>
                        <li> In Wordpress</li>
                        <li> Comments</li>
                    </ol>

                    <span class="post-format-standart"></span>

                </div>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi. Donec dictum, lectus sed vulputate porta, elit sapien sagittis nulla, vitae fermentum justo tellus nec dolor. Vestibulum sem nunc, volutpat vitae commodo nec, pulvinar eget metus. Nam ipsum augue, consectetur sagittis pellentesque vel, lacinia sit amet turpis. Curabitur at mi orci. Curabitur sit amet libero lacus, eu posuere sapien. Nunc mattis velit id sapien gravida et mattis leo malesuada.</p>

                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi. Donec dictum, lectus sed vulputate porta, elit sapien sagittis nulla, vitae fermentum justo tellus nec dolor. Vestibulum sem nunc, volutpat vitae commodo nec, pulvinar eget metus. Nam ipsum augue, consectetur sagittis pellentesque vel, lacinia sit amet turpis. Curabitur at mi orci. Curabitur sit amet libero lacus, eu posuere sapien. Nunc mattis velit id sapien gravida et mattis leo malesuada.</p>
                </blockquote>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi. Donec dictum, lectus sed vulputate porta, elit sapien sagittis nulla, vitae fermentum justo tellus nec dolor. Vestibulum sem nunc, volutpat vitae commodo nec, pulvinar eget metus. Nam ipsum augue, consectetur sagittis pellentesque vel, lacinia sit amet turpis. Curabitur at mi orci. Curabitur sit amet libero lacus, eu posuere sapien. Nunc mattis velit id sapien gravida et mattis leo malesuada.</p>

                <div class="alert alert-info">
                    <button data-dismiss="alert" class="close" type="button">&times;</button>
                    <strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi.
                </div>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi. Donec dictum, lectus sed vulputate porta, elit sapien sagittis nulla, vitae fermentum justo tellus nec dolor. Vestibulum sem nunc, volutpat vitae commodo nec, pulvinar eget metus. Nam ipsum augue, consectetur sagittis pellentesque vel, lacinia sit amet turpis. Curabitur at mi orci. Curabitur sit amet libero lacus, eu posuere sapien. Nunc mattis velit id sapien gravida et mattis leo malesuada.</p>

                <div class="alert alert-success">
                    <strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi.
                </div>

            </article><!-- /.entry -->

            <!-- #comments -->
            <section id="comments">

                <h3>Comments (6)</h3>

                <!-- .comments-list -->
                <ol class="comments-list">
                    <li>
                        <article class="clearfix">
                            <img src="images/avatar.png" class="avatar" alt="Image">
                            <div class="comment-meta">
                                <h4><a href="#">John Doe</a> - <small>June 30, 2012</small></h4> 
                                <a class="comment-reply label label-inverse" href="#">Reply</a>
                            </div>
                            <div class="comment-body">
                                <p>Morbi velit eros, sagittis in facilisis non, rhoncus et erat. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae. Curabitur lacinia neque non metus.</p>
                            </div>
                        </article>

                        <ul>
                            <li>
                                <article class="clearfix">
                                    <img src="images/avatar.png" class="avatar" alt="Image">
                                    <div class="comment-meta">
                                        <h4><a href="#">John Doe</a> - <small>June 30, 2012</small></h4> 
                                        <a class="comment-reply label label-inverse" href="#">Reply</a>
                                    </div>
                                    <div class="comment-body">
                                        <p>Morbi velit eros, sagittis in facilisis non, rhoncus et erat. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae. Curabitur lacinia neque non metus.</p>
                                    </div>
                                </article>

                                <ul>
                                    <li>
                                        <article class="clearfix">
                                            <img src="images/avatar.png" class="avatar" alt="Image">
                                            <div class="comment-meta">
                                                <h4><a href="#">John Doe</a> - <small>June 30, 2012</small></h4> 
                                                <a class="comment-reply label label-inverse" href="#">Reply</a>
                                            </div>
                                            <div class="comment-body">
                                                <p>Morbi velit eros, sagittis in facilisis non, rhoncus et erat. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae. Curabitur lacinia neque non metus.</p>
                                            </div>
                                        </article>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </li>

                    <li>
                        <article class="clearfix">
                            <img src="images/avatar.png" class="avatar" alt="Image">
                            <div class="comment-meta">
                                <h4><a href="#">John Doe</a> - <small>June 30, 2012</small></h4> 
                                <a class="comment-reply label label-inverse" href="#">Reply</a>
                            </div>
                            <div class="comment-body">
                                <p>Morbi velit eros, sagittis in facilisis non, rhoncus et erat. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae. Curabitur lacinia neque non metus.</p>
                            </div>
                        </article>
                    </li>

                    <li>
                        <article class="clearfix">
                            <img src="images/avatar.png" class="avatar" alt="Image">
                            <div class="comment-meta">
                                <h4><a href="#">John Doe</a> - <small>June 30, 2012</small></h4> 
                                <a class="comment-reply label label-inverse" href="#">Reply</a>
                            </div>
                            <div class="comment-body">
                                <p>Morbi velit eros, sagittis in facilisis non, rhoncus et erat. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae. Curabitur lacinia neque non metus.</p>
                            </div>
                        </article>
                    </li>
                </ol><!-- /.comments-list -->

            </section><!-- /#comments -->

            <!-- #respond -->
            <section id="respond">

                <h3>Leave a comment</h3>

                <!-- #comments-form .row -->
                <form id="comments-form" class="row" method="post">
            
                    <p class="span3">
                        <label for="comm-name"><strong>Name</strong> (required)</label>
                        <input type="text" required="" id="comm-name" value="" name="name">
                    </p>

                    <p class="span3">
                        <label for="comm-email"><strong>Email</strong> (required)</label>
                        <input type="email" required="" id="comm-email" value="" name="email">
                    </p>
                    
                    <p class="span3">
                        <label for="comm-url"><strong>Website</strong></label>
                        <input type="url" id="comm-url" value="" name="url">
                    </p>

                    <p class="span9">
                        <label for="comm-message"><strong>Your Comment</strong> (required)</label>
                        <textarea required="" rows="10" cols="80" id="comm-message" name="message"></textarea>
                    </p>
                    
                    <p class="span9"><input type="submit" value="Submit Comment" class="btn btn-danger btn-large"></p>
                    
                </form><!-- /#comments-form .row -->

            </section><!-- /#respond -->

        </section><!-- /#page.span9.alignright -->
        
        <!-- #sidebar.span3.alignleft -->
        <aside id="sidebar" class="span3 alignleft">

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Categories</h3>

                <ul class="categories">
                    <li class="current"><a href="#">Photoshop</a></li>
                    <li><a href="#">Themeforest</a></li>
                    <li><a href="#">Envato</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <li><a href="#">News</a></li>
                </ul>

            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Latest Post</h3>

                <ul class="latest-post">
                    <li class="clearfix">
                        <img src="images/post-format/latest-video.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-standart.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-gallery.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet consectetur elit</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-quote.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet adipiscing</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-aside.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet adipiscing</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                </ul>
                
            </div><!-- /.widget --> 

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Flickr</h3>

                <ul class="widget-flickr clearfix"></ul> 
                
            </div><!-- /.widget -->           

            <!-- .widget -->
            <div class="widget">
                
                <h3 class="title">Latest Tweets</h3>

                <div id="sidebar-tweet" class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $("#sidebar-tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 3,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Latest Work</h3>
                <div id="carousel2" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item"><a href="./posrtfolio-single.html"><img src="example/post1.jpg" alt="Images" /></a></div>
                        <div class="item"><a href="./posrtfolio-single.html"><img src="example/post2.jpg" alt="Images" /></a></div>
                        <div class="item"><a href="./posrtfolio-single.html"><img src="example/post3.jpg" alt="Images" /></a></div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#carousel2" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#carousel2" data-slide="next">&rsaquo;</a>
                </div>

                <script type="text/javascript">
                    $(document).ready(function(){
                       $('.carousel2').carousel({
                            interval: 4000
                        })
                    });
                </script>

            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Archive</h3>

                <ul>
                    <li><i class="icon-calendar"></i><a href="#">February 2012</a> <span class="alignright">(12)</span></li>
                    <li><i class="icon-calendar"></i><a href="#">March 2012</a> <span class="alignright">(8)</span></li>
                    <li><i class="icon-calendar"></i><a href="#">April 2012</a> <span class="alignright">(15)</span></li>
                    <li><i class="icon-calendar"></i><a href="#">May 2012</a> <span class="alignright">(2)</span></li>
                    <li><i class="icon-calendar"></i><a href="#">June 2012</a> <span class="alignright">17)</span></li>
                </ul>

            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Recent Comments</h3>

                <ul class="recent-comments">
                    <li><span>bingumd says:</span> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
                    <li><span>bingumd says:</span> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
                    <li><span>bingumd says:</span> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
                    <li><span>bingumd says:</span> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
                </ul>

            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Video Widget</h3>

                <div class="video-container">
                    <iframe src="http://player.vimeo.com/video/7449107" width="674" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </div> 
                
            </div><!-- /.widget -->
            
        </aside><!-- /#sidebar.span3.alignleft -->

    </div><!-- /.row -->


    <!-- #footer.container -->
    <footer id="footer" class="container">
        
        <!-- .row .clearfix -->
        <div class="row clearfix">

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">About Us</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris. Donec vel felis metus, et laoreet enim. Donec congue nunc sit amet lacus lacinia pretium.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</p>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Latest Tweets</h3>

                <div class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $(".tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 2,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Recent Post</h3>

                <ul>
                    <li class="first">
                        <span class="date">April 18, 2012</span>
                        <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>


                    <li>
                        <span class="date">April 18, 2012</span>
                        <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>
                </ul>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">
                
                <h3 class="title">Follow Us</h3>

                <!-- .social -->
                <ul class="social">
                    <li class="twitter"><a href="#">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="dribbble"><a href="#">dribbble</a></li>
                    <li class="vimeo"><a href="#">vimeo</a></li>
                    <li class="flickr"><a href="#">flickr</a></li>
                    <li class="pinterest"><a href="#">pinterest</a></li>
                </ul><!-- /.social -->

            </div><!-- /.span3 -->

        </div><!-- /.row .clearfix -->

        <!-- #copyright.clearfix -->
        <div id="copyright" class="clearfix">

            <p>Copyright 2012. All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>

            <!-- #footer-menu -->
            <nav id="footer-menu">
                <ul class="clearfix">
                    <li><a href="#" class="current" data-description="Home Page">Home</a>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav><!-- /#footer-menu -->

        </div><!-- /#copyright .clearfix -->

    </footer><!-- /#footer .container -->


</section><!-- /.container -->


</body>
</html>